import React from "react";
import "./App.css";
import "element-ui/lib/theme-chalk/index.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import NavBar from "./components/layout/NavBar.jsx";
import Footer from "./components/layout/Footer.jsx";
import Landing from "./components/layout/Landing.jsx";
import Login from "./components/Auth/Login.jsx";
import Register from "./components/Auth/Register.jsx";
import Dashboard from "./components/dashboard/Dashboard.jsx";
import PrivateRoute from "./common/PrivateRoute.js";
import CreateProfile from './components/create-profile/CreateProfile.jsx'
import EditProfile from './components/edit-profile/EditProfile.jsx'
import AddEducation from './components/add-creadprofile/AddEducation.jsx'
import AddExperience from './components/add-creadprofile/AddExperience.jsx'
import Profiles from './components/profiles/Profiles.jsx'
import profile from './components/profile/Profile.jsx'
import Posts from './components/posts/Posts.jsx'
import Post from './components/post/Post';


import store from "./store";

//Provider 在跟组件外面包了一层。这样一来。app的所有组件都能默认拿到state了
import { Provider } from "react-redux";
import setAuthToken from "./utils/setAuthToken";
import jwt_decode from "jwt-decode";
import { setCurrentUser, logoOutUser } from "./actions/authActions";

if (localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  //解析token
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));

  //检测token是否过期
  //获取当前时间
  const currentTiem = Date.now() / 1000;
  //判断当前时间是否大于token过期时间
  if (decoded.exp < currentTiem) {
    //过期
    store.dispatch(logoOutUser());
    //q清楚用户信息

    // {}

    //跳转登录页面
    window.location.href = "/login";
  }
}
function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div className="App">
          <NavBar></NavBar>
          <Route exact path="/" component={Landing}></Route>
          <div className="contaier">
            <Route exact path="/login" component={Login}></Route>
            <Route exact path="/register" component={Register}></Route>
            <Route exact path="/profiles" component={Profiles}></Route>
            <Route exact path="/profile/:handle" component={profile}></Route>
            <Switch>
              <PrivateRoute
                exact
                path="/dashboard"
                component={Dashboard}
              ></PrivateRoute>
            </Switch>
            <Switch>
              <PrivateRoute
                exact
                path="/CreateProfile"
                component={CreateProfile}
              ></PrivateRoute>
            </Switch>
            <Switch>
              <PrivateRoute
                exact
                path="/EditProfile"
                component={EditProfile}
              ></PrivateRoute>
            </Switch>
            <Switch>
              <PrivateRoute
                exact
                path="/AddEducation"
                component={AddEducation}
              ></PrivateRoute>
            </Switch>
            <Switch>
              <PrivateRoute
                exact
                path="/AddExperience"
                component={AddExperience}
              ></PrivateRoute>
            </Switch>
            <Switch>
              <PrivateRoute
                exact
                path="/feed"
                component={Posts}
              ></PrivateRoute>
            </Switch>
            <Switch>
                <PrivateRoute exact path="/post/:id" component={Post} />
              </Switch>
          </div>
          <Footer></Footer>
        </div>
      </BrowserRouter>
    </Provider>
  );
}

export default App;
